<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <link rel="stylesheet" href="../css/base.css">
    <title>服务大厅</title>
</head>

<body>
    <div id="app">
        <div class="contaiiner">
            <div class="topbox">
                <div class="topdiv">
					<div class="topcenter">
						<div class="topzhye" style="width:60%;">
						    <div class="txtLeft">姓名：{{formdata.name}}</div>
						    <div class="txtLeft martop">表具号：{{formdata.bjh}}</div>
							<div class="txtLeft martop">地址：{{formdata.xxdz}}</div>
						</div>
						<div class="topzhye" style="width:40%;">
						    <div class="txtRight">账户余额</div>
						    <div class="price txtRight">{{formdata.balance}}</div>
						</div>
					</div>
                </div>
            </div>
            <div>
                <div class="title">信息公告</div>
                <div class="txtBox">
                    <table border="1" class="tablebox" cellspacing="0" width="100%">
                        <tr>
                            <td @click="blbxBtn">
                                <div class="txtcard">
                                    <div class="imgbox">
                                        <i class="ifonts el-icon-s-tools yellow"></i>
                                    </div>
                                    <div class="txtbox">
                                        <div class="txtcard-txt">报漏报修</div>
                                        <div class="txtcard-txt2 txtwrap">报修报漏</div>
                                    </div>
                                </div>
                            </td>
                            <td @click="tsjyBtn">
                                <div class="txtcard">
                                    <div class="imgbox">
                                        <i class="ifonts el-icon-warning rad"></i>
                                        <!-- <el-image src="../images/nature-1.jpg" fit="cover"></el-image> -->
                                    </div>
                                    <div class="txtbox">
                                        <div class="txtcard-txt">投诉建议</div>
                                        <div class="txtcard-txt2 txtwrap">投诉建议</div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

            </div>
        </div>

        <div class="bottom-box">
            <div class="bottom">
                <div class="bottomnav" :class="showActive?'active':''" @click="intoiframe(0)">
                    <div><i class="ifont el-icon-s-home"></i></div>
                    <div>服务大厅</div>
                </div>
                <div class="bottomnav" :class="showActive?'':'active'" @click="intoiframe(1)">
                    <div><i class="ifont el-icon-s-custom"></i></div>
                    <div>个人中心</div>
                </div>
            </div>
        </div>

    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            showActive: false,
            formdata:{},
        },
        created() {
            this.loginOpenid();
        },
        methods: {
            //登录
            async loginOpenid(){
                this.parmsData = getParams();
                if(this.parmsData.code != "" && this.parmsData.code != undefined){
                    const res = await postWebCustom(getTableId("1922"),{code:this.parmsData.code});
                    if(res.code == 0){
                        this.$message(res.msg);
                        return;
                    }
                    if(res.data.openid){
                        localStorage.setItem("token",res.data.openid);
                        this.getUserInfo();
                    }
                }else {
                    let token = localStorage.getItem("token");
                    if(null == token){
                        window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx7694329543afd764&redirect_uri=https://sw.duoduodouya.com/admin/html/module/hetianjiangrun/html/indexgrzx.html&response_type=code&scope=snsapi_base&#wechat_redirect";
                    }else {
                        this.getUserInfo();
                    }
                }

            },
            async getUserInfo(){
                const res = await postWebCustom(getTableId("1928"),{});
                this.formdata = res.data;
            },
            intoiframe(code){
                if (code == 1) {
                    this.showActive = false;
                    location.href = '../html/indexgrzx.html'
                } else {
                    this.showActive = true;
                    location.href = '../html/indexfwdt.html'
                }
            },
            blbxBtn(){
                location.href = './children/repaiReport.html'
            },
            tsjyBtn(){
                location.href = './children/suggestions.html'
            },
        },

    })
</script>
<style type="text/css">
    .contaiiner {
        padding: 0 0 60px 0;
        min-height: calc(100vh - 80px);
        background-color: rgb(228, 225, 225);
    }

    .iframebox{
        height: calc(100vh - 80px);
    }

    /* 底部导航 */
    .bottom-box {
        position: fixed;
        background-color: #fff;
        bottom: 0;
        width: 100%;
    }

    .bottom {
        padding: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
    }

    .bottomnav{
        width: 100%;
    }

    .ifont{
        font-size: 40px;
    }
    .active{
        color: #409eff;
    }
    .topbox {
        width: 100%;
        height: 240px;
        overflow: hidden;
        padding: 0 0 10px;
    }

    .topdiv {
        width: 97%;
        height: 100%;
        margin: 0 auto;
        background-color: #409eff;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        color: #fff;
        box-shadow: 0 0 10px 1px rgb(82, 82, 82);
    }
	
	.topcenter{
		width: 90%;
		height: 100%;
		margin: 0 auto;
		display: flex;
	}
	
    .topzhye{
        height: 100%;
        padding: 0 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 18px;
    }
	
	.txtLeft{
	    width: 100%;
	    text-align: left;
	}

    .txtRight{
        width: 100%;
        text-align: right;
    }

    .price{
        margin-top: 10px;
        font-size: 30px;
    }

    .tablebox,
    .tablebox tr td {
        border-color: rgb(233, 233, 233);
        box-shadow: none;
        border-collapse: collapse;
        overflow: hidden;
    }

    .title {
        font-weight: 700;
        padding: 15px 8px;
    }

    .txtBox {
        background: #fff;
    }

    .txtcard {
        width: 100%;
        display: flex;
        justify-content: left;
        align-items: center;
        padding: 8px 0;
    }

    .imgbox {
        width: 120px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .imgbox el-image {
        margin: 0;
        width: 100px;
        height: 100px;
    }

    .txtbox {
        width: 100%;
    }

    .txtcard-txt {
        font-size: 18px;
    }

    .txtcard-txt2 txtwrap {
        color: rgb(127, 127, 127);
        font-size: 12px;
    }
    .ifonts{
        font-size: 50px;
    }
    .yellow{
        color: #eaad4c;
    }
    .rad{
        color: #f1584a;
    }
    .txtwrap {
        word-break: break-word;
    }
	.martop{
		margin-top:10px;
	}
</style>

</html>